<template>
  <div style="height: 100%;overflow-y: auto">
    <div id="dialog">
      <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
      <my-dialog :visible.sync="dialogVisible" title="dialogDemo" :handle-close="handleClose">
        内容部分
      </my-dialog>
    </div>
    <BaseCard title="说明">
      <pre><h2><h3><h4><code>此组件是基于elemet ，dialog组件进行的二次封装,更贴近我们项目UI样式，visible 选项来控制dialog组件的显示隐藏，接受一个boolean，.sync是父子组件值的同步<br>
        title选项是dialog的标题，接受一个字符串，handle-close 可以参照 element dialog handleClose 选项功能类似，只能拦截x号关闭</code></h4></h3></h2></pre>
    </BaseCard>
    <base-card title="代码实例">
      <pre><h2><h3><h4><code><p>&lt;template&gt;<br>  &lt;div&gt;<br>    &lt;div id="dialog"&gt;<br>      &lt;el-button type="text" @click="dialogVisible = true"&gt;点击打开 Dialog&lt;/el-button&gt;<br>      &lt;my-dialog :visible.sync="dialogVisible" title="dialogDemo" :handle-close="handleClose"&gt;<br>        内容部分<br>      &lt;/my-dialog&gt;<br>    &lt;/div&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br><br>&lt;script&gt;<br>  import BaseCard from '../../components/BaseCard/BaseCard'<br>  import MyDialog from '../../components/MyDialog/index'<br>  export default {<br>    name: 'dialogDemo',<br>    data() {<br>      return {<br>        dialogVisible: false,<br>        handleClose(done) {<br>          this.$confirm('确认关闭？')<br>            .then(_ =&gt; {<br>              done()<br>            })<br>            .catch(_ =&gt; {<br>            })<br>        }<br>      }<br>    },<br>    components: {<br>      BaseCard,<br>      MyDialog<br>    },<br>    methods: {<br><br>    }<br>  }<br>&lt;/script&gt;<br><br>&lt;style lang="scss" &gt;<br><br>&lt;/style&gt;</p></code></h4></h3></h2></pre>
    </base-card>
  </div>
</template>

<script>
  import BaseCard from '../../components/BaseCard/BaseCard'
  import MyDialog from '../../components/MyDialog/index'
  export default {
    name: 'dialogDemo',
    data() {
      return {
        dialogVisible: false,
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done()
            })
            .catch(_ => {
            })
        }
      }
    },
    components: {
      BaseCard,
      MyDialog
    },
    methods: {

    }
  }
</script>

<style lang="scss" >

</style>
